<template>
  <div class="home">
    <h1>你好我是首页</h1>
    <button @click="addNum(5)">+</button>
    {{ num }}
    <hr>
    {{ doubleNum }}
    <!-- {{ $store.getters.doubleNum }} -->
    <button @click="reduceNum(10)">-</button>
    <button @click="addNumAsync(50)">异步+</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Home',
  methods: {
    ...mapMutations(['addNum', 'reduceNum']),
    ...mapActions(['addNumAsync'])
  },
  mounted () {
    console.log(this)
  },
  computed: {
    ...mapState(['num']),
    ...mapGetters(['doubleNum']),
    arr () {
      return JSON.parse(JSON.stringify(this.$store.state.arr))
    }
  }
  /* computed: {
    num () {
      return this.$store.state.num
    }
  } */
}

</script>
<style lang="scss" scoped>
/deep/ h1{
  color: red;
}
</style>
